import { useState } from 'react';
import { Button, Nag, Segment } from '@fomantic-react/main';

export default () => {
  const [active, setActive] = useState(false);

  return (
    <Segment>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <Button onClick={() => setActive(!active)}>Toggle</Button>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <Nag active={active} onClose={() => setActive(!active)}>
        Welcome to the nag module
      </Nag>
    </Segment>
  );
};
